<template>
    <div class='c-tags'>
        <div class="list">
            <ul class="clearfix">
                <li 
                    class="item"
                    :class="[value == item[fieldValue] ? 'active' : '']"
                    v-for="item in data" 
                    :key="item[fieldValue]"
                    @click="switchItem(item)"
                >
                    <span>{{item[fieldText]}}</span>
                </li>
            </ul>
        </div>
        <div class="popover">
            <van-popover 
                v-model="show" 
                position="bottom" 
                :style="{width:'100%',height:'60%'}"
                get-container="body"
                :round="true"
                theme="dark"
                placement="bottom-end"
            >
                <!-- <div class="close-popup-tags" @click="show=false">
                    <i class="iconfont icon-guanbi"></i>
                </div> -->
                <div class="popup-tags-list">
                    <div class="list">
                        <div class="scroll">
                            <div class="item" 
                                :class="[value == item[fieldValue] ? 'active' : '']"
                                v-for="(item) in data" 
                                :key="item[fieldValue]" 
                                @click="switchItem(item)"
                            >
                                <span class="text">{{item[fieldText]}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <template #reference>
                    <div class="icon" @click="show=true">
                        <i class="iconfont icon-gengduo"></i>
                    </div>
                </template> 
            </van-popover>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() { 
        return {
            show:false
        }
    },
    model:{
        prop:"value",
        event:"input"
    },
    props: {
        data:{
            type:Array,
            default(){
                return []
            }
        },
        fieldValue:{
            type:String,
            default:"id"
        },
        fieldText:{
            type:String,
            default:"label"
        },
        value:{
            type:String,
            default:""
        }
    },
    components:{
    },
    mounted() {

    },
    methods:{
        switchItem(item){
            //v-model
            this.$emit('input',item[this.fieldValue]);
            //触发事件
            this.$emit("itemClick",item);
        }
    },
}
</script>

<style lang='scss' scoped>
.c-tags{
    overflow: hidden;
    display:flex;
    align-items: center;
    .icon{
        width:1rem;
        text-align: center;
        .iconfont{
            display:block;
            font-size:0.36rem;
        }
    }
    .list{
        flex:1;
        overflow: hidden;
        ul{
            width:100%;
            overflow: auto;
            white-space: nowrap;
            li{
                display:inline-flex;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
                height:0.8rem;
                padding-left:0.3rem;
                padding-right:0.3rem;
                border-radius: 5px;
                font-size:0.34rem;
            }
            li+li{
                margin-left:0.2rem;
            }
        }
    }
}
.popup-tags-list{
    padding:0.3rem;
    .list{
        max-height:6rem;
        overflow: auto;
        .scroll{
            overflow: hidden;
            width:6rem;
        }
        .item{
            float:left;
            width:50%;
            box-sizing: border-box;
            line-height:0.65rem;
            text-align: center;
            padding-left:0.2rem;
            padding-right:0.2rem;
            border-radius: 4px;
            font-size:0.28rem;
            margin:0.15rem 0;
            .text{
                display: block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
}
.close-popup-tags{
    position:absolute;
    right:0.1rem;
    top:0.1rem;
    .iconfont{
        font-size:0.5rem;
    }
}
</style>